<template>
	<view class="container">
		<view class="header-top">
			<view class="rule-btn flex-center" @click="$u.throttle(goRecord, 500)">
				申请记录
			</view>
		</view>
		<!-- 顶部订单信息 -->
		<u-cell-group>
			<u-cell title="订单编号" :value="orderInfo.orderNo"></u-cell>
			<u-cell title="发票金额" :value="orderInfo.amount"></u-cell>
		</u-cell-group>

		<!-- 发票类型选择 -->
		<view class="section" @click="showInvoiceType = true">
			<view>发票类型</view>
			<text class="value-text">{{ invoiceTypeText || '请选择 >' }}</text>
		</view>

		<!-- 抬头类型选择 -->
		<view class="section">
			<view>抬头类型</view>
			<u-radio-group v-model="form.titleType">
				<u-radio v-for="item in titleTypes" :key="item.value" :name="item.value" :label="item.label" activeColor='#FF4110'></u-radio>
			</u-radio-group>
		</view>

		<!-- 公司信息表单 -->
		<view class="form-section" v-if="form.titleType === 2">
			<u--form :model="form" :rules="rules" ref="uForm">
				<u-form-item label="发票抬头" prop="title" label-width="80">
					<u--input v-model="form.title" placeholder="请输入公司名称" maxlength='20' />
				</u-form-item>

				<u-form-item label="税号" prop="taxNumber" label-width="80">
					<u--input v-model="form.taxNumber" placeholder="请输入纳税人识别号" :custom-style="{fontFamily: 'monospace'}"
						maxlength='20' />
				</u-form-item>

				<u-form-item label="单位地址" prop="address" label-width="80">
					<u--input v-model="form.address" placeholder="请输入单位地址" maxlength='20'>
						<template #suffix>
							<u-icon name="map" size="20" color="#999"></u-icon>
						</template>
					</u--input>
				</u-form-item>

				<u-form-item label="开户银行" prop="bank" label-width="80">
					<u--input v-model="form.bank" placeholder="请输入开户银行名称" maxlength='15' />
				</u-form-item>

				<u-form-item label="银行账户" prop="bankAccount" label-width="80">
					<u--input v-model="form.bankAccount" placeholder="请输入银行账号" maxlength='19' />
				</u-form-item>
			</u--form>
		</view>

		<!-- 提交按钮 -->
		<view class="submit-btn">
			<u-button type="primary" :loading="submitting" @click="handleSubmit">
				提交申请
			</u-button>
		</view>

		<!-- 发票类型选择弹窗 -->
		<u-action-sheet :show="showInvoiceType" :actions="invoiceTypes" title="请选择发票类型" @close="showInvoiceType = false"
			@select="chooseInvoiceType"></u-action-sheet>
	</view>
</template>

<script setup>
	import {
		ref,
		reactive,
		computed
	} from 'vue';

	// 订单信息
	const orderInfo = reactive({
		orderNo: '20230808123456',
		amount: '¥ 599.00'
	});

	// 表单数据
	const form = reactive({
		titleType: 2, // 1-个人 2-公司
		title: '',
		taxNumber: '',
		address: '',
		bank: '',
		bankAccount: ''
	});

	// 表单验证规则
	const rules = reactive({
		title: [{
			required: true,
			message: '请输入发票抬头',
			trigger: ['blur', 'change']
		}],
		bank: [{
			required: true,
			message: '请输入开户银行',
			trigger: ['blur', 'change']
		}],
		bankAccount: [{
			required: true,
			message: '请输入银行账户',
			trigger: ['blur', 'change']
		}],
		taxNumber: [{
				required: true,
				message: '请输入税号',
				trigger: ['blur', 'change']
			},
			{
				pattern: /^[A-Z0-9]{15,20}$/,
				message: '税号格式不正确（15-20位大写字母或数字）',
				trigger: ['blur']
			}
		],
		address: [{
			required: true,
			message: '请选择单位地址',
			trigger: ['blur', 'change']
		}]
	});

	// 发票类型相关
	const showInvoiceType = ref(false);
	const invoiceTypes = ref([{
			name: '电子普通发票'
		},
		{
			name: '增值税专用发票'
		}
	]);
	const invoiceTypeText = ref('');
	const chooseInvoiceType = (item) => {
		invoiceTypeText.value = item.name;
		showInvoiceType.value = false;
	};

	// 抬头类型选项
	const titleTypes = ref([{
			label: '个人',
			value: 1
		},
		{
			label: '公司',
			value: 2
		}
	]);

	// 地址选择
	const chooseAddress = async () => {
		try {
			const res = await uni.chooseLocation();
			if (res.address) {
				form.address = res.address;
			}
		} catch (e) {
			console.log('取消选择地址');
		}
	};

	// 提交处理
	const submitting = ref(false);
	const uForm = ref(null);
	const goRecord= ()=>{
		uni.navigateTo({
			url:'/pages/goods/payment/record_application/index'
		})
	}
	const handleSubmit = async () => {
		console.log("form",form);
		try {
			if(invoiceTypeText.value==''){
				uni.showToast({
					title: '请选择发票类型！',icon:"none"
				});
				return
			}
			if (form.titleType === 2) {
				// 公司类型验证表单
				const valid = await uForm.value.validate();
				if (!valid) return;
				console.log("订单类型",orderInfo,"发票类型", invoiceTypeText.value, "表单", form);
			}
			
			submitting.value = true;
			// 模拟提交
			await new Promise(resolve => setTimeout(resolve, 1500));
			uni.showToast({
				title: '提交成功'
			});

			// 实际应调用接口：
			// const res = await uni.request({
			//   url: 'your_api_url',
			//   method: 'POST',
			//   data: form
			// });

		} catch (error) {
			uni.showToast({
				title: '请填写完整公司信息',
				icon: 'none'
			});
		} finally {
			submitting.value = false;
		}
	};
</script>
<style>
	>>>.u-radio {
		margin-left: 20rpx;
	}

	>>>.u-radio-group {
		flex: none !important;
	}
</style>
<style lang="scss" scoped>
	.header-top {
		// background-image: url('https://smartyouke.oss-cn-beijing.aliyuncs.com/ad/61e85f86be9244a7a6ea4482c5ff65a0.png');
		width: 100%;
		height: 100rpx;
		background-size: cover;
	
		.rule-btn {
			top: 40rpx;
			height: 54rpx;
			background: rgba(0, 0, 0, .15);
			border-radius: 13px 0 0 13px;
			position: absolute;
			right: 0;
			width: 71px;
			font-size: 24rpx;
			color: #fff;
		}
	}
	
	.container {
		padding: 20rpx;
		min-height: 100vh;
		background-color: #f7f7f7;

		.section {
			margin-top: 30rpx;
			font-size: 30rpx;
			// background: #fff;
			border-radius: 16rpx;
			padding: 0 30rpx;
			display: flex;

			view {
				flex: 1;
			}
		}

		.value-text {
			color: #666;
			font-size: 28rpx;
		}

		.form-section {
			border: 1px solid #ebebeb;
			margin-top: 30rpx;
			background: #fff;
			border-radius: 16rpx;
			padding: 20rpx 30rpx;
		}

		.submit-btn {
			margin: 50rpx 30rpx 30rpx;
		}

		:deep(.u-form-item__body) {
			padding: 24rpx 0;
			align-items: flex-start;

			.u-form-item__message {
				margin-top: 8rpx;
			}
		}

		.map-icon {
			padding-left: 20rpx;
			border-left: 1rpx solid #eee;
		}
	}
</style>